<!-- 新闻分类详情页 -->

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 分类信息
const category = ref({
  id: route.params.id,
  name: '科技',
  description: '关注前沿科技动态，了解最新技术趋势',
  posts: '125.8万',
  followers: '23.5万',
  isFollowing: false,
  bgColor: 'bg-blue-50',
  iconColor: 'text-blue-500',
  icon: 'Monitor'
})

// 文章列表
const articles = ref([
  {
    id: 1,
    title: 'ChatGPT-4展现惊人能力，AI发展迎来新突破',
    summary:
      '最新研究显示，ChatGPT-4在多个领域取得重大突破，包括自然语言处理、计算机视觉等方面...',
    author: '科技日报',
    publishTime: '2小时前',
    views: '12.5万',
    comments: 238,
    image: 'https://picsum.photos/200/150?random=1',
    tags: ['AI', '科技']
  },
  {
    id: 2,
    title: '量子计算研究获重大进展',
    summary:
      '科学家成功实现了新的量子比特控制方法，为量子计算机的实用化迈出重要一步...',
    author: '未来科技',
    publishTime: '4小时前',
    views: '8.3万',
    comments: 156,
    image: 'https://picsum.photos/200/150?random=2',
    tags: ['量子计算', '前沿科技']
  }
])

// 热门标签
const tags = ref([
  { id: 1, name: 'AI', count: '12.5万' },
  { id: 2, name: '量子计算', count: '8.3万' },
  { id: 3, name: '芯片', count: '6.7万' },
  { id: 4, name: '机器人', count: '5.4万' },
  { id: 5, name: '区块链', count: '4.2万' }
])

// 切换关注状态
const toggleFollow = () => {
  category.value.isFollowing = !category.value.isFollowing
}

// 跳转到文章详情
const goToNews = (id: number) => {
  router.push(`/newsArticle/${id}`)
}

// 跳转到标签详情
const goToTag = (id: number) => {
  router.push(`/news/category/${id}`)
}
</script>

<template>
  <!-- 分类页面 -->
  <div class="space-y-6 mx-40">
    <!-- 分类头部 -->
    <div class="bg-white rounded-lg p-6 mt-6">
      <div class="flex items-start justify-between">
        <div class="flex items-start gap-6">
          <!-- 图标 -->
          <div
            :class="[
              category.bgColor,
              'w-16 h-16 rounded-lg flex items-center justify-center'
            ]"
          >
            <el-icon :class="[category.iconColor, 'text-3xl']">
              <component :is="category.icon" />
            </el-icon>
          </div>

          <!-- 信息 -->
          <div>
            <h1 class="text-2xl font-bold mb-2">{{ category.name }}</h1>
            <p class="text-gray-500 mb-4">{{ category.description }}</p>
            <div class="flex items-center gap-6 text-sm text-gray-500">
              <span class="flex items-center gap-1">
                <el-icon><Document /></el-icon>
                {{ category.posts }} 文章
              </span>
              <span class="flex items-center gap-1">
                <el-icon><User /></el-icon>
                {{ category.followers }} 关注
              </span>
            </div>
          </div>
        </div>

        <!-- 关注按钮 -->
        <el-button
          :type="category.isFollowing ? 'default' : 'primary'"
          size="large"
          @click="toggleFollow"
        >
          {{ category.isFollowing ? '已关注' : '关注' }}
        </el-button>
      </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
      <!-- 文章列表 -->
      <div class="lg:col-span-3 space-y-4">
        <el-card
          v-for="article in articles"
          :key="article.id"
          class="hover:shadow-lg transition-all cursor-pointer"
          @click="goToNews(article.id)"
        >
          <div class="flex gap-6">
            <div class="flex-1">
              <h3
                class="text-xl font-bold mb-2 hover:text-blue-500 line-clamp-2"
              >
                {{ article.title }}
              </h3>
              <p class="text-gray-600 text-sm line-clamp-2 mb-3">
                {{ article.summary }}
              </p>
              <div class="flex items-center gap-3 text-sm text-gray-500">
                <span class="flex items-center">
                  <el-icon class="mr-1"><User /></el-icon>
                  {{ article.author }}
                </span>
                <span class="flex items-center">
                  <el-icon class="mr-1"><View /></el-icon>
                  {{ article.views }}
                </span>
                <span class="flex items-center">
                  <el-icon class="mr-1"><ChatDotRound /></el-icon>
                  {{ article.comments }}
                </span>
                <span class="flex items-center">
                  <el-icon class="mr-1"><Timer /></el-icon>
                  {{ article.publishTime }}
                </span>
              </div>
            </div>
            <div class="w-[200px] h-[150px] flex-shrink-0">
              <el-image
                :src="article.image"
                fit="cover"
                class="w-full h-full rounded"
              />
            </div>
          </div>
        </el-card>
      </div>

      <!-- 右侧边栏 -->
      <div class="space-y-6">
        <!-- 热门标签 -->
        <el-card>
          <template #header>
            <div class="font-bold">热门话题</div>
          </template>
          <div class="space-y-3">
            <div
              v-for="tag in tags"
              :key="tag.name"
              class="flex items-center justify-between hover:bg-gray-50 p-2 rounded cursor-pointer"
              @click="goToTag(tag.id)"
            >
              <span class="text-blue-500"># {{ tag.name }}</span>
              <span class="text-gray-500 text-sm">{{ tag.count }}</span>
            </div>
          </div>
        </el-card>

        <!-- 投稿按钮 -->
        <el-button
          type="primary"
          class="w-full"
        >
          <el-icon class="mr-1"><Plus /></el-icon>
          发布文章
        </el-button>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.el-card {
  &:hover {
    transform: translateY(-2px);
  }
}
</style>
